<template>
  <div v-loading="loading" class="energy-consume">
    <div class="chart-wrap">
      <px-row :gutter="16">
        <px-col :span="8">
          <div class="lf-wrap">
            <div class="black mg-bt-16">
              <modelTitle :title="'供气总览'" />
              <div class="content">
                <div class="top">
                  <div class="item">
                    <img src="@/assets/images/energy/supplyOverview/ng48.png" class="img" alt="图片" />
                    <div class="rt">
                      <div class="text">供气量</div>
                      <div>
                        <span class="num">{{ dataObj?.ng || "-" }}</span
                        ><span class="unit">m³</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="btm">
                  <div class="item">
                    <img src="@/assets/images/energy/supplyOverview/coal48.png" class="img" alt="图片" />
                    <div class="rt">
                      <div class="text">折标煤</div>
                      <div>
                        <span class="num">{{ dataObj?.scoal || "-" }}</span
                        ><span class="unit">tce</span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <img src="@/assets/images/energy/supplyOverview/co248.png" class="img" alt="图片" />
                    <div class="rt">
                      <div class="text">碳排放</div>
                      <div>
                        <span class="num">{{ dataObj?.ecarbon || "-" }}</span
                        ><span class="unit">tCO2e</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="black">
              <modelTitle :title="'消耗侧占比'" />
              <btnImageAndData class="btn" :exportData="Boolean(false)" @exportChange="val => handlerExport(val, 'pieChartRef')" />
              <div ref="pieChartRef" class="chart" />
            </div>
          </div>
        </px-col>
        <px-col :span="16">
          <div class="rt-wrap">
            <modelTitle :title="'供气趋势'" />
            <px-switch v-if="params?.queryTimeGranularity === 'Monthly'" v-model="switchVal" active-text="同期数据" @change="switchChange" />
            <btnImageAndData class="btn" :exportData="Boolean(false)" @exportChange="val => handlerExport(val, 'lineChartRef')" />
            <div ref="lineChartRef" class="chart" />
          </div>
        </px-col>
      </px-row>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, computed, nextTick } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import btnImageAndData from "@/views/common/energy/components/btnImageAndData/index.vue";
import { getSupplyNGAPI } from "@/api/energy/supplyOverview";
import { drawPieChart, drawLineChart, drawStackedBarChart } from "../utils.js";

const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  activeName: {
    type: String,
    default: () => ""
  }
});

const pieChartRef = ref();
const lineChartRef = ref();

const state = reactive({
  loading: false,
  dataObj: {
    ng: "", //供气量
    scoal: "", // 折标煤量
    ecarbon: "", // 碳排放量
    supplyRatio: [],
    supplyTrend: {
      xaxis: [],
      yaxis: []
    }
  },
  switchVal: false
});
const { loading, dataObj, switchVal } = toRefs(state);
const queryParams = computed(() => props.params);

onMounted(() => {
  getData();
});

let chartObj = {};

const getData = async () => {
  try {
    state.loading = true;
    const { startDate, endDate, dimension } = getParams();
    const params = {
      factoryId: "",
      facCode: "",
      dimension: dimension || "",
      startDate: startDate || "",
      endDate: endDate || ""
    };
    if (startDate && endDate) {
      const res = await getSupplyNGAPI(params);
      state.dataObj = JSON.parse(JSON.stringify(res));
      nextTick(() => {
        if (res?.supplyRatio) {
          chartObj.pieChartRef = drawPieChart(pieChartRef.value, res?.supplyRatio);
        }
        if (res?.supplyTrend) {
          res.supplyTrend.yaxis = res?.supplyTrend?.yaxis?.filter(i => !i?.name?.includes("同期"));
          // chartObj.lineChartRef = drawLineChart(lineChartRef.value, res?.supplyTrend);
          chartObj.lineChartRef = drawStackedBarChart(lineChartRef.value, res?.supplyTrend);
        }
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};

// 获取参数
const getParams = () => {
  let timeType = queryParams.value.queryTimeGranularity;
  let startDate = queryParams.value.startTime || "";
  let endDate = queryParams.value.endTime || "";

  let timeObj = {
    Hourly: "HOUR",
    Daily: "DAY",
    Monthly: "MONTH",
    Yearly: "YEAR"
  };
  let dimension = timeObj[timeType] || MONTH;
  return {
    startDate,
    endDate,
    dimension
  };
};
// 导出方法
const handlerExport = (val1, val2) => {
  let myChart = chartObj[val2];
  if (!myChart) return;
  // 获取Base64图片数据
  const imgUrl = myChart.getDataURL({
    type: "png",
    pixelRatio: 2,
    backgroundColor: "#fff"
  });
  // 创建并触发下载链接
  const link = document.createElement("a");
  link.href = imgUrl;
  link.download = "chart.png";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};
const switchChange = val => {
  let obj = {};
  obj.xaxis = state.dataObj.supplyTrend.xaxis;
  obj.yaxis = state.dataObj?.supplyTrend?.yaxis?.filter(i => (val ? i : !i?.name?.includes("同期")));
  // chartObj.lineChartRef = drawLineChart(lineChartRef.value, obj);
  chartObj.lineChartRef = drawStackedBarChart(lineChartRef.value, obj);
};
</script>

<style lang="scss" scoped>
.energy-consume {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.mg-bt-16 {
  margin-bottom: 16px;
}

.chart-wrap {
  display: flex;
  flex: 1;

  .px-row {
    flex: 1;
  }

  .lf-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;

    .black {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 16px 24px;
      background: #fff;
      border-radius: 4px;

      .content {
        flex: 1;
        margin-top: 48px;

        .top {
          display: flex;
          justify-content: space-between;
        }

        .btm {
          display: flex;
          justify-content: space-between;
          margin-top: 40px;
        }

        .item {
          display: flex;
          flex: 1;

          .img {
            width: 48px;
            height: 48px;
          }

          .rt {
            display: flex;
            flex-direction: column;
            margin-left: 12px;

            .num {
              font-size: 24px;
              font-weight: 500;
              word-break: break-all;
            }

            .unit {
              margin-left: 4px;
            }
          }
        }
      }

      .chart {
        flex: 1;
        margin-top: 26px;
      }
    }
  }

  .rt-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 24px;
    background: #fff;
    border-radius: 4px;

    .chart {
      flex: 1;
      margin-top: 26px;
    }
  }

  .btn {
    position: absolute;
    top: 16px;
    right: 24px;
  }
}
</style>
